<template>
  <div class="entry-container">
    <el-tabs type="border-card">
      <el-tab-pane label="单价配置">
        <el-form ref="form" :model="form" label-width="150px" class="form-container">
          <el-form-item label="燃气费">
            <el-input placeholder="请输入燃气费" v-model="form.heatPrice">
              <template slot="append">（元/立方米）</template>
            </el-input>
          </el-form-item>
          <el-form-item label="电费">
            <el-input placeholder="请输入电费" v-model="form.powerPrice">
              <template slot="append">（元/千瓦时）</template>
            </el-input>
          </el-form-item>
          <el-form-item label="供冷费">
            <el-input placeholder="请输入供冷费" v-model="form.coolPrice">
              <template slot="append">（元/千瓦时）</template>
            </el-input>
          </el-form-item>
          <el-form-item label="供暖费">
            <el-input placeholder="请输入供暖费" v-model="form.warmPrice">
              <template slot="append">（元/千瓦时）</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="能源网关配置">
        <el-form ref="form" :model="form" label-width="150px" class="form-container">
          <el-form-item label="中心站IP地址">
            <el-input placeholder="请输入中心站IP地址" v-model="form.ipAddress"></el-input>
          </el-form-item>
          <el-form-item label="中心站服务端口">
            <el-input placeholder="请输入中心站服务端口" v-model="form.serverPort"></el-input>
          </el-form-item>
          <el-form-item label="建筑ID">
            <el-input placeholder="请输入建筑ID" v-model="form.buildingId"></el-input>
          </el-form-item>
          <el-form-item label="网关ID">
            <el-input placeholder="请输入网关ID" v-model="form.gatewayId"></el-input>
          </el-form-item>
          <el-form-item label="上传时间间隔">
            <el-input placeholder="请输入上传时间间隔" v-model="form.uploadTime">
              <template slot="append">（分钟）</template>
            </el-input>
          </el-form-item>
          <el-form-item label="通道名称">
            <el-select v-model="form.channelName" placeholder="请选择通道名称" style="width: 100%;">
              <el-option label="标准RS485-1" value="标准RS485-1"></el-option>
              <el-option label="标准RS485-2" value="标准RS485-2"></el-option>
              <el-option label="标准RS485-3" value="标准RS485-3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="协议">
            <el-select v-model="form.agreement" placeholder="请选择协议" style="width: 100%;">
              <el-option label="国标97" value="国标97"></el-option>
              <el-option label="国标2007" value="国标2007"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="能耗类型">
            <el-select v-model="form.consumePower" placeholder="请选择能耗类型" style="width: 100%;">
              <el-option label="电" :value="1"></el-option>
              <el-option label="冷" :value="2"></el-option>
              <el-option label="热" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="波特率">
            <el-input placeholder="请输入波特率" v-model="form.baudRate"></el-input>
          </el-form-item>
          <el-form-item label="表计地址">
            <el-input placeholder="请输入表计地址" v-model="form.meterAddress"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: null,
        heatPrice: null, // 燃气费
        coolPrice: null, // 供冷费
        powerPrice: null, // 电费
        warmPrice: null, // 供暖费
        ipAddress: null, // 中心站IP地址
        serverPort: null, // 中心站服务端口
        buildingId: null, // 建筑Id
        gatewayId: null, // 网关Id
        uploadTime: null, // 上传时间
        channelName: null, // 通道名称
        consumePower: null, // 能耗类型
        baudRate: null, // 波特率
        meterAddress: null, // 表计地址
        agreement: null, // 协议
      }
    };
  },
  async mounted() {
    const result = await this.$fetchGet("/config/getConfig");
    console.log(result);
    this.form = {
      id: result.result.id,
      heatPrice: result.result.heatPrice / 100, // 燃气费
      coolPrice: result.result.coolPrice / 100, // 供冷费
      powerPrice: result.result.powerPrice / 100, // 电费
      warmPrice: result.result.warmPrice / 100, // 供暖费
      ipAddress: result.result.ipAddress, // 中心站IP地址
      serverPort: result.result.serverPort, // 中心站服务端口
      buildingId: result.result.buildingId, // 建筑Id
      gatewayId: result.result.gatewayId, // 网关Id
      uploadTime: result.result.uploadTime, // 上传时间
      channelName: result.result.channelName, // 通道名称
      consumePower: result.result.consumePower, // 能耗类型
      baudRate: result.result.baudRate, // 波特率
      meterAddress: result.result.meterAddress, // 表计地址
      agreement: result.result.agreement, // 表计地址
    };
  },
  methods: {
    async onSubmit() {
      const params = JSON.parse(JSON.stringify(this.form))
      params.heatPrice = params.heatPrice * 100
      params.coolPrice = params.coolPrice * 100
      params.powerPrice = params.powerPrice * 100
      params.warmPrice = params.warmPrice * 100
      const result = await this.$fetchPost('/config/update', params)
      console.log(result)
      if (!result.success) {
        this.$message.error(result.error)
        return
      }
      this.$message.success('修改成功')
    }
  }
};
</script>

<style lang="less">
.entry-container {
  width: 100vw;
  height: calc(100vh - 60px);
  .form-container {
    width: 50vw;
    margin: 0 auto;
  }
}
</style>